<template>
  <div class="verification-wrapper" v-if="captchaEnabled">
    <div class="input-field">
      <i class="img-key">
        <font-awesome-icon icon="fa-solid fa-key"/>
      </i>
      <input
          :value="code"
          @input="$emit('update:code', $event.target.value)"
          type="text"
          :placeholder="placeholder"
      />
    </div>
    <div class="verification-img" @click="$emit('refresh')">
      <img :src="codeUrl" :alt="placeholder"/>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  code: {
    type: String,
    default: ''
  },
  codeUrl: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请输入验证码'
  },
  captchaEnabled: {
    type: Boolean,
    default: true
  }
})

defineEmits(['update:code', 'refresh'])
</script>

<style scoped>
.verification-wrapper {
  width: 100%;
  max-width: 380px;
  display: flex;
  gap: 10px; /* 输入框和验证码图片之间的间距 */
}

.input-field {
  width: 50%; /* 占据一半宽度 */
  background-color: #f0f0f0;
  height: 55px;
  border-radius: 55px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  position: relative;
}

.input-field i {
  width: 40px;
  text-align: center;
  color: #acacac;
  transition: 0.5s;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-field input {
  flex: 1;
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-weight: 600;
  font-size: 1.1rem;
  color: #333;
  height: 100%;
}

.input-field input::placeholder {
  color: #aaa;
  font-weight: 500;
}
.img-key{
  margin-right: 25px;
}
.verification-img {
  width: 50%;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  /* 移除所有边框 */
  border: none;
}

.verification-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s;
  /* 移除所有边框和轮廓 */
  border: none;
  outline: none;
}

.verification-img:hover img {
  opacity: 0.9;
}
</style>